<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Downloader</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/static/css/style.css">
</head>

<body>
    <div id="app">
        <div class="header">
            <el-input v-model="url" placeholder="Enter URL" style="width: 80%;"></el-input>
            <el-button type="primary" @click="downloadImages">Download Images</el-button>
        </div>
        <div class="progress-container">
            <el-progress :key="task.id" :percentage="task.progress" :status="task.status" class="progress-item" ></el-progress>
        </div>
        <div class="download-records">
            <h3>最近下载记录</h3>
            <el-table :data="downloadRecords" style="width: 100%">
                <el-table-column prop="url" label="网址" width="400"></el-table-column>
                <!-- <el-table-column prop="domain" label="域名" width="150"></el-table-column>
                <el-table-column prop="title" label="标题" width="150"></el-table-column> -->
                <el-table-column prop="total_images" label="图片数量" width="100"></el-table-column>
                <el-table-column prop="total_size" label="总大小" width="100"></el-table-column>
                <el-table-column prop="download_time" label="下载时间" width="200"></el-table-column>
            </el-table>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                url: '',
                task: {},
                downloadRecords: {{ download_records | tojson }}
            },
            methods: {
                downloadImages() {
                    fetch('/download', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ url: this.url })
                    }).then(response => response.json())
                        .then(data => {
                            if (data.message) {
                                const taskId = data.task_id;
                                this.task = { id: taskId, progress: 0, status: 'active' };

                                // 定时获取进度
                                const intervalId = setInterval(() => {
                                    fetch(`/progress/${taskId}`)
                                        .then(response => response.json())
                                        .then(data => {
                                            this.task.progress = data.progress;
                                            if (data.status === 'completed' || data.status === 'failed') {
                                                clearInterval(intervalId);
                                                this.task.status = data.status === 'completed' ? 'success' : 'exception';
                                                this.fetchDownloadRecords(); // 下载完成后更新下载记录
                                            }
                                        });
                                }, 3000);
                            } else {
                                this.task = { id: taskId, progress: 0, status: 'exception' };
                            }
                        }).catch(error => {
                            this.task = { id: taskId, progress: 0, status: 'exception' };
                        });
                },
                fetchDownloadRecords() {
                    fetch('/download-records')
                        .then(response => response.json())
                        .then(data => {
                            this.downloadRecords = data;
                        });
                }
            },
            created() {
                this.fetchDownloadRecords(); // 初始化时获取下载记录
            }
        });
    </script>
</body>

</html>